<template>
  <div class="container">
    <page-header></page-header>
    <div class="content">
        <router-view class="router"></router-view>
    </div>
    
    <audio-player  v-if="state.playList.length"></audio-player>
    
    
      
  </div>
</template>




<script lang='ts'>
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
import PageHeader from '../components/Page-Header.vue'
import AudioPlayer from '../components/Home/Audio-Player.vue'

export default defineComponent({
    setup () {
        
        const store = useStore();
        const state = computed(() => { // 使用计算属性来监听Vuex数据的变化
            return store.state
        })
        return {

            state
        }
    },
    components:{
        PageHeader,
        AudioPlayer
    }
})
</script>
 
<style lang = "scss" scoped>
@import "../assets/css/main.scss";

</style>